<template>
	<view class="pages-order">
		<fixed :zIndex="99">
			<tab @change="handerTabChange($event, 'type')" :isLine="false" :list="typeList" :activeIndex="typeIndex*1" :activeColor="primaryColor"
				width="33.33%" height="100rpx"></tab>
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" activeColor="#FF2404"
				width="20%" height="100rpx"></tab>
			<!-- <tab v-if="tabList[activeIndex].id == 998" @change="handerTabChange($event, 'service')" :list="serviceList" :activeIndex="serviceIndex*1" :activeColor="primaryColor"
				width="33.33%" height="100rpx"></tab> -->
			<view class="b-1px-b"></view>
		</fixed>
		<view v-if="tabList[activeIndex].id == 998" style="height: 100rpx;"></view>
		<view class="order-list">
			<view class="ml-md mr-md mt-md radius-16 fill-base order-item pl-lg pr-lg" v-for="(item,index) in list.data" :key="index"
			@tap="$util.goUrl({url: `/demand/pages/order/detail?id=${item.id}&refund=${tabList[activeIndex].id == 999?1:0}`})">
				<view class=" pt-md pb-md b-1px-b">
					<view class="flex-y-center">
						<text class="f-min-title">订单编号：</text>
						<text class="f-desc c-caption">{{item.order_code}}</text>
					</view>
					<view class="pt-sm flex-between">
						<text class="f-min-title text-bold">{{orderType[item.type].name}}</text>
						<text :style="{color: primaryColor}">{{orderType[item.type].type}}</text>
					</view>
				</view>
				<view class="flex-between h-80">
					<view class="f-desc">预约时间：{{$util.formatTime(item.start_time*1000, 'YY-M-D h:m')}}</view>
					<view v-if="tabList[activeIndex].id == 999" class="f-desc" :style="{color: refundType[item.status].color}">{{refundType[item.status].name}}</view>
					<view v-else class="f-desc" :style="{color: statusType[item.status].color}">{{statusType[item.status].name}}</view>
				</view>
				<view class="flex-between pb-md">
					<image :src="item.type_img" mode="aspectFill" class="radius-16 order-image"></image>
					<view class="flex-1 pl-md">
						<view class="flex-between pb-sm">
							<view class="f-title text-bold" :class="[{'max-350 ellipsis': item.status == 1 && item.over_time > 0}]">{{item.title}}</view>
							<min-countdown v-if="item.status == 1 && item.over_time > 0" :targetTime="item.over_time * 1000" @callback="countEnd" formatType="1" 
							:isPlay="true" :type="1" style="height: 46rpx;color: #FF2404;"></min-countdown>
						</view>
						<view class=" c-warning f-paragraph">￥{{item.price}}</view>
						<!-- <view class="flex-y-baseline ">
							<text class="f-caption text-bold c-warning">￥</text>
							<text class="f-title text-bold c-warning ">466.00</text>
						</view> -->
						<view class="f-caption c-caption">下单时间：{{$util.formatTime(item.create_time*1000, '')}}</view>
					</view>
				</view>
				<!--售后订单-->
				<block v-if="tabList[activeIndex].id == 999">
					<view class="flex-between" v-if="item.status == 1">
						<view class="flex-y-center" v-if="item.coach_id">
							<image :src="item.coach_info.work_img" mode="aspectFill" class="staff-image"></image>
							<view class="pl-sm f-desc">师傅 - {{item.coach_info.name}}</view>
						</view>
						<view class="flex-center">
							<view class="radius-10 order-btn cancel-btn flex-center f-desc" @tap.stop="toRefundCancel(index)">取消售后</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="flex-y-center" v-if="item.coach_id">
						<image :src="item.coach_info.work_img" mode="aspectFill" class="staff-image"></image>
						<view class="pl-sm f-desc">师傅 - {{item.coach_info.name}}</view>
					</view>
					<view class="flex-between pt-md">
						<view class="f-paragraph c-icontext pt-sm pb-sm">{{item.demand_fee_switch && item.type == 3 ? '联系下单人支付服务费' : ''}}</view>
						<view class="flex-y-center">
							<view class="radius-10 order-btn flex-center f-desc ml-md pl-md pr-md" style="border: 1px solid #D1D1D1;"
							@tap.stop="changeOrder(index, 'cancel')" v-if="item.can_cancel == 1">取消订单</view>
							<view class="radius-10 order-btn flex-center f-desc ml-md pl-md pr-md"
							:style="{border: `1px solid ${primaryColor}`, color: primaryColor}" 
							v-if="[9].includes(item.status) && item.type != 3 && !item.add_price_list"
							@tap.stop="setDifference(index)">{{item.is_add == 1 ? `查看补差价` : `申请补差价`}}</view>
							<view class="radius-10 order-btn flex-center f-desc ml-md"
							:style="{color: `#fff`, background: primaryColor}" v-if="[6,7,8,9].includes(item.status)"
							@tap.stop="changeOrder(index)">{{statusButton[item.status]}}</view>
						</view>
					</view>
					
				</block>
			</view>
		</view>
		
		<uni-popup ref="order_box" type="center" :custom="true">
			<view class="order-box fill-base pl-lg pr-lg radius-16 pt-md pb-lg">
				<view class="f-title flex-center h-80 text-bold rel">验收
					<i class="iconfont iconguanbi abs" style="right: 0;color: #ccc;" @tap="$refs.order_box.close()"></i>
				</view>
				<view class="f-paragraph pb-lg pt-lg">请上传完成图片</view>
				<view class="pb-lg flex-center">
					<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.order_check_img" imgtype="order_check_img" text="上传图片" :imgsize="9"
						:pictureSize="5" imgclass="mini">
					</upload>
				</view>
				<view class="flex-center pb-lg pt-lg">
					<view class="radius-10 service-btn flex-center f-desc"
					:style="{color: `#fff`, background: primaryColor}" 
					@tap.stop="changeOrder(form.index,'upload')">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading"
			v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
		<view class="space-footer"></view>
		
		<!-- <view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
		<tabbar :cur="4"></tabbar> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				form: {
					order_check_img: [],
					index: 0
				},
				options: {},
				// 状态 1待支付 2已支付/待审核 3审核不通过 4审核通过 5已发布/待接单 6已接单/待出发 7已出发 8已到达 9服务中 10服务完成 11订单完成
				statusType: {
					'-2': {name: '已退款', color: '#999999'},
					'-1': {name: '已取消', color: '#999999'},
					1: {name: '待支付', color: '#999999'},
					2: {name: '待审核', color: '#999999'},
					3: {name: '已驳回', color: '#999999'},
					4: {name: '已通过', color: '#999999'},
					5: {name: '待接单', color: '#999999'},
					6: {name: '待上门', color: '#999999'},
					7: {name: '已出发', color: '#999999'},
					8: {name: '已到达', color: '#999999'},
					9: {name: '服务中', color: '#999999'},
					10: {name: '服务完成', color: '#999999'},
					11: {name: '订单完成', color: '#999999'}
				},
				statusButton: {
					6: '马上出发',
					7: '已到达',
					8: '开始服务',
					9: '服务完成'
				},
				typeList: [
					// {
					// 	title: '全部',
					// 	id: 0
					// },
					{
						title: '咨询',
						id: 1
					},
					{
						title: '一口价',
						id: 2
					},
					{
						title: '家政公司',
						id: 3
					}
				],
				orderType: {
					1: {name: '咨询', type: '订金'},
					2: {name: '一口价', type: '全款'},
					3: {name: '家政公司', type: '全款'}
				},
				refundType: {
					1: {name: '待审核', color: '#666666'},
					2: {name: '已通过', color: '#666666'},
					3: {name: '已驳回', color: '#666666'}
				},
				loading: true,
				lockTap: false,
				
				list: {
					data: [],
					last_page: 1,
					current_page: 1
				},
				param: {
					page: 1,
					type: 0,
					status: 0, // 1待支付 2待审核 5待接单 6待服务 9服务中 11订单完成
				},
				tabList: [{
					title: '全部',
					id: 0
				},
				{
					title: '待上门',
					id: 67
				},
				{
					title: '待开始',
					id: 8
				},
				// {
				// 	title: '待服务',
				// 	id: 998
				// },
				{
					title: '服务中',
					id: 9
				}, {
					title: '已完成',
					id: 10,
					//is_comment: 2
				}, {
					title: '已取消',
					id: '-2',
				}],
				activeIndex: 0,
				serviceIndex: 0,
				typeIndex: 0,
				// 待服务状态
				serviceList: [
				{
					title: '待出发',
					id: 6,
					is_sign: 1
				}, {
					title: '已出发',
					id: 7,
					is_sign: 1
				}, {
					title: '已到达',
					id: 8,
					is_sign: 1
				}],
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			coachInfo: state => state.user.coachInfo,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			let {
				tab = 0
			} = options
			this.activeIndex = tab
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.loading = true;
			this.getList(this.param.page + 1);
		},
		methods: {
			...mapActions(['getConfigInfo', 'getOrderList', 'getRefundList', 'getCoachInfo']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					await this.getConfigInfo()
				}
				if(!this.coachInfo.id || refresh){
					await this.getCoachInfo()
				}
				await this.getList(1)
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh(){
				this.$util.showLoading()
				this.initIndex(true)
			},
			async getList(page = 0){
				if (page) {
					this.param.page = page
				}
				let {
					list: oldList,
					param,
					tabList,
					typeList,
					activeIndex = 0,
					typeIndex = 0,
					serviceIndex = 0,
					serviceList
				} = this
				param.status = tabList[activeIndex].id
				param.type = typeList[typeIndex].id
				if(tabList[activeIndex].id == 998){
					param.status = serviceList[serviceIndex].id
				}
				if(tabList[activeIndex].is_comment){
					param.is_comment = tabList[activeIndex].is_comment
				}else{
					delete param.is_comment
				}
				try {
					if(tabList[activeIndex].id == 999){
						await this.getRefundList({page: param.page, status: 0})
					}else{
						let newList = await this.$api.demand.getDemandList(param)
						if (this.param.page == 1) {
							this.list = newList
						} else {
							newList.data = oldList.data.concat(newList.data)
							this.list = newList
						}
					}
					this.loading = false
					this.$util.hideAll()
				} catch (e) {
					this.loading = false
					this.$util.hideAll()
				}
			},
			handerTabChange(index, type = '') {
				console.log(index)
				if(type == 'type'){
					this.typeIndex = index
				}else if(type == 'service'){
					this.serviceIndex = index
				} else{
					this.activeIndex = index
				}
				
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.$util.showLoading()
				this.getList(1)
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.form[imgtype] = imagelist;
			},
			// 补差价
			setDifference(index){
				let {
					id,
					is_add = 0
				} = this.list.data[index]
				this.$util.goUrl({url: `/demand/pages/order/difference?id=${id}&is_add=${is_add}`})
			},
			async changeOrder(index,type = ''){
				let {
					id,
					status,
					order_type
				} = this.list.data[index]
				let param = {
					id,
					status
				}
				if(status == 9 && this.configInfo.coach_end_order_upload && !type){ // 服务完成 是否上传图片
					this.form.order_check_img = []
					this.form.index = index
					this.$refs.order_box.open()
					return
				}
				// 图片上传
				let form = this.$util.deepCopy(this.form)
				if(type == 'upload' && form.order_check_img.length > 0){
					param.order_check_img = form.order_check_img.map(item => {
						return item.path
					})
				}
				// console.log(form,type,param)
				// return
				param.status = param.status + 1
				if(type == 'cancel'){
					this.$util.goUrl({openType: 'call', url: this.coachInfo.service_tel})
					return
				}
				this.$util.showLoading()
				await this.$api.demand.updateOrderStatus(param)
				this.$refs.order_box.close()
				this.$util.hideAll()
				this.$util.showToast({
					title: param.status == 2 ? '取消成功' : '操作成功'
				})
				this.$refs.order_box.close()
				this.getList(1)
			},
			// 完成订单
			async endOrder(index){
				let {
					id
				} = this.list.data[index]
				await this.$api.order.endOrder({
					id
				})
				if (this.activeIndex == 0) {
					this.list.data[index].status = 8
				} else {
					this.list.data.splice(index, 1)
				}
				this.$util.showToast({
					title: `已完成`
				})
			},
			// 取消售后
			async toRefundCancel(index){
				let [res_del, {
					confirm
				}] = await uni.showModal({
					content: `请确认是否要取消售后`,
				})
				if (!confirm) return;
				let {
					id
				} = this.list.data[index]
				await this.$api.order.cancelRefund({
					id
				})
				this.list.data.splice(index, 1)
				this.$util.showToast({
					title: `取消成功`
				})
			},
			// 取消订单
			async toCancel(index) {
				let [res_del, {
					confirm
				}] = await uni.showModal({
					content: `请确认是否要取消订单`,
				})
				if (!confirm) return;
				let {
					id
				} = this.list.data[index]
				await this.$api.demand.cancelOrder({
					id
				})
				if (this.activeIndex == 0) {
					this.list.data[index].status = -1
				} else {
					this.list.data.splice(index, 1)
				}
				this.$util.showToast({
					title: `取消成功`
				})
			},
			countEnd(){
				this.getList(1)
			},
			// 去支付
			async toPay(index) {
				if (this.lockTap) return;
				this.lockTap = true;
				this.$util.showLoading()
				let {
					id,
					pay_model = 1
				} = this.list.data[index]
			
				try {
					let {
						pay_list
					} = await this.$api.demand.rePayOrder({
						id
					})
					this.$util.hideAll()
					if (pay_list) {
						if (pay_model == 3) {
							pay_list = {
								orderInfo: pay_list,
								provider: 'alipay'
							}
						}
			
						// #ifdef H5
			
						// if (pay_model == 3) {
						// 	pay_list = Object.assign({}, pay_list, {
						// 		order_id: id,
						// 		page_url: `/pages/order?tab=2`
						// 	})
						// 	this.updateOrderItem({
						// 		key: 'alipayOrderParams',
						// 		val: pay_list
						// 	})
						// 	this.$util.goUrl({
						// 		url: '/user/pages/alipay-result'
						// 	})
						// 	this.lockTap = false
						// 	setTimeout(() => {
						// 		this.initRefresh()
						// 	}, 3000)
						// 	return
						// }
						// #endif
			
						try {
							await this.$util.pay(pay_list)
							this.$util.showToast({
								title: `支付成功`
							})
							if (this.activeIndex == 0) {
								this.list.data[index].pay_type = 2
							} else {
								this.list.data.splice(index, 1)
							}
							this.lockTap = false;
						} catch (e) {
							this.$util.showToast({
								title: `支付失败`
							})
							this.lockTap = false;
							return
						}
					}
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
		},
	}
</script>


<style lang="scss">
	.pages-order {
		.order-item{
			padding-bottom: 24rpx;
			.order-image{
				width: 160rpx;
				height: 160rpx;
			}
			.order-btn{
				min-width: 152rpx;
				height: 62rpx;
				color: #5B5B5B;
			}
			.cancel-btn{
				border: 1px solid #979797;
			}
			
			.staff-info{
				padding-top: 24rpx;
			}
			.staff-image{
				width: 51rpx;
				height: 51rpx;
				border-radius: 51rpx;
			}
		}
		.order-box{
			width: 690rpx;
			.service-btn{
				width: 222rpx;
				height: 62rpx;
				color: #5B5B5B;
			}
		}
	}
</style>
